import React from "react";
import {
  BrowserRouter,
  Routes,
  Route,
  Navigate,
  useRoutes,
} from "react-router-dom";

const Home = React.lazy(() => import("../views/home"));
const Classify = React.lazy(() => import("../views/classify"));
const Car = React.lazy(() => import("../views/car"));
const My = React.lazy(() => import("../views/my"));
const HomeC1 = React.lazy(() => import("../views/homeC1"));
const HomeC2 = React.lazy(() => import("../views/homeC2"));

export const routes = [
  {
    path: "/home",
    element: <Home></Home>,
    children: [
      {
        path: "/home/c1",
        element: <HomeC1></HomeC1>,
      },
      {
        path: "/home/c2",
        element: <HomeC2></HomeC2>,
      },
    ],
  },
  {
    path: "/classify",
    element: <Classify></Classify>,
  },
  {
    path: "/car",
    element: <Car></Car>,
  },
  {
    path: "/my",
    element: <My></My>,
  },
  {
    path: "/",
    element: <Navigate to="/home"></Navigate>,
  },
];

// 使用 官方 渲染
const RouterView = () => useRoutes(routes);

const Router = () => {
  return (
    <BrowserRouter>
      <React.Suspense fallback="路由加载中...">
        <RouterView></RouterView>
      </React.Suspense>
    </BrowserRouter>
  );
};

export default Router;
